<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<link id="link" href="css2.css" rel="stylesheet" type="text/css" />

</head>

<body>

	<dl id="message">
		<form>
			<dt>
				<strong>可以换肤的提交框：</strong>
				<input id="btn1" cn="css1" type="button" value="皮肤1" />
				<input id="btn2" cn="css2" type="button" value="皮肤2" />
			</dt>
			<dd>输入姓名：<input class="text" type="text" /></dd>
			<dd>输入密码：<input class="text" type="password" /></dd>
			<dd>请您留言：<textarea></textarea></dd>
			<dd class="center"><input class="btn" type="submit" value="提交" /></dd>
		</form>
		<script>
			/*
				1- 两个换肤按钮，添加点击事件，点击的时候
					2-获取按钮下标 -加1 ，拼接字符串 css1.css css2.css
					2- 获取按钮的自定义属性--getAttribute('cn') -> css1拼接.css

					3-地址 赋值 给 link标签的href属性
			*/

			// 1- 两个换肤按钮，添加点击事件，点击的时候 

			var btnArr = document.querySelectorAll('dt input');
			// 添加点击事件，点击的时候 
			btnArr.forEach(function (btn, i) {
				btn.onclick = function () {

					// 2-获取按钮下标 -加1 ，拼接字符串 css1.css css2.css
					// 点击的时候 
					// var n = i + 1;
					// var cssUrl = "css" + n + '.css';
					// console.log(cssUrl);


					//2- 获取按钮的自定义属性--getAttribute('cn') -> css1拼接.css
					var cssUrl = btn.getAttribute('cn') + '.css'
					console.log(cssUrl);


					// 3-地址 赋值 给 link标签的href属性
					// 获取link标签
					var link = document.querySelector("#link")
					// 修改link的地址
					link.href = cssUrl;


				}
			})




		</script>
	</dl>

</body>

</html>